<template>
  <!-- 统计card -->
  <div class="header-tag">
    <n-row gutter="12">
      <n-col
        v-for="(item, index) in tags"
        :key="item.label"
        :span="6"
        :gutter="4"
      >
        <n-card size="medium" :class="[`card-${index}`, 'card-item']">
          <div class="tag-item">
            <div class="icon-bg" :style="{ background: '#fff' }">
              <icons
                :name="item.icons"
                :isHoverCursor="false"
                size="24px"
                :primary="true"
                :defaultPrimary="item.iconColor"
              />
            </div>
            <div style="margin-left: 20px">
              <n-h2
                prefix="bar"
                :style="{
                  margin: '0 0 5px 0',
                  '--n-bar-color': false
                }"
                :type="item.type"
              >
                <!-- <n-text :type="item.type">{{ item.label }}</n-text> -->
                <n-text style="color: #fff">{{ item.label }}</n-text>
              </n-h2>
              <span class="tag-num">
                <n-number-animation
                  ref="numberAnimationInstRef"
                  :from="0"
                  :to="item.num"
                />
                <span class="tag-unit">（件）</span>
              </span>
            </div>
          </div>
          <img :src="Strips" class="strips" />
        </n-card>
      </n-col>
    </n-row>
  </div>
  <div>
    <n-card class="card">
      <template #header>
        <div class="prefix-title">部门各类型资产总数</div>
      </template>
      <div class="echart-box">
        <pro-echarts
          ref="ChartTwoInstance"
          :options="option2"
          :loading="loading2"
        />
      </div>
    </n-card>
    <n-card class="card">
      <template #header>
        <div class="prefix-title">部门各类型申请总数</div>
      </template>
      <div class="echart-box">
        <pro-echarts
          ref="ChartOneInstance"
          :options="option"
          :loading="loading"
        />
      </div>
    </n-card>
  </div>

  <n-notification-provider>
    <notice ref="noticeRef" @noticeChange="handleNoticeChange" />
  </n-notification-provider>
</template>

<script lang="ts" setup>
  import Strips from '@/assets/svg/strips.svg'
  import Notice, {
    NoticeInstance
  } from '@/layout/components/layoutComponent/notice/index.vue'
  import { useOptionsOne } from './hooks/useOptionsOne'
  import { useOptionsTwo } from './hooks/useOptionsTwo'
  import ProEcharts from '@/components/pro-echarts/index.vue'
  import { Ref } from 'vue'
  import {
    getCountOfTypeApi,
    getHomeTagApi,
    getReceiveCountApi
  } from '@/api/asset-management/assets'
  const { option, loading, data } = useOptionsOne()
  const { option2, loading2, data2 } = useOptionsTwo()

  const ChartOneInstance: Ref<InstanceType<typeof ProEcharts> | null> =
    ref(null)
  const ChartTwoInstance: Ref<InstanceType<typeof ProEcharts> | null> =
    ref(null)

  const tags = ref([
    {
      icons: 'i-write',
      label: '部门资产总数',
      type: 'default',
      iconColor: '#078ff9',
      property: 'applyNum',
      num: 0
    },
    {
      icons: 'i-edit-two',
      label: '采购申请总数',
      type: 'info',
      iconColor: '#3f80b6',
      property: 'toBeSignNum',
      num: 0
    },
    {
      icons: 'i-switch',
      label: '资产报废总数',
      type: 'success',
      iconColor: '#36ea7e',
      property: 'toBeAllocateNum',
      num: 0
    },
    {
      icons: 'i-finance',
      label: '资产维修总数',
      type: 'warning',
      iconColor: '#ff4b55',
      property: 'toBeConfiguredNum',
      num: 0
    }
  ])
  const { userInfo } = getUserInfo()

  async function fetchGetHomeTag() {
    const res = await getHomeTagApi({ orgId: userInfo.value.orgId as number })
    if (res.code === '0000') {
      tags.value.forEach((item, index) => {
        tags.value[index].num = res.data[index]
      })
    }
  }
  async function fetchGetCountOfType() {
    const res = await getCountOfTypeApi({
      orgId: userInfo.value.orgId as number
    })
    if (res.code === '0000') {
      data2.value = res.data
    }
  }
  async function fetchGetReceiveCount() {
    const res = await getReceiveCountApi({
      orgId: userInfo.value.orgId as number
    })
    if (res.code === '0000') {
      data.value = res.data
    }
  }
  // 预警相关
  const noticeRef = ref<NoticeInstance | null>(null)
  const num = ref(0)
  // 请求
  const getNoticeInfoFetch = (delay = 1000) => {
    nextTick(() => {
      noticeRef.value?.fetchWarning(delay)
    })
  }
  // 处理通知数量改变
  const handleNoticeChange = (noticeList: Array<any>) => {
    num.value = noticeList.filter((item) => !!item.todoName).length
  }

  fetchGetHomeTag()
  fetchGetCountOfType()
  fetchGetReceiveCount()

  if (userInfo.value.roleCode === 'branchManager') {
    getNoticeInfoFetch()
  }
</script>

<style lang="less" scoped>
  .card {
    margin-bottom: 20px;
  }
  .echart-box {
    width: 100%;
    height: 300px;
  }
  .header-tag {
    margin-bottom: 10px;
  }
  .sign-chart {
    margin: 10px 0;
    width: 100%;
    height: 400px;
    :deep(.n-card-header) {
      padding-bottom: 10px;
    }
  }
  .type-chart {
    width: 100%;
    height: 320px;
    :deep(.n-card-header) {
      padding-bottom: 10px;
    }
  }
  .icon-bg {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tag-item {
    display: flex;
    align-items: flex-start;
  }
  .tag-num {
    font-size: 24px;
    text-align: center;
    margin-left: 20px;
    color: #fff;
  }
  .tag-unit {
    margin: 0 2px;
    font-size: 14px;
    color: #fff;
  }
  .strips {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 99%;
    height: 35%;
    opacity: 1;
  }
  .card-item {
    cursor: pointer;
  }
  .chart-item:hover {
    transform: scale(1.01);
  }
  .card-0 {
    background: linear-gradient(121deg, #0081ff 0%, #22cce2 101%);
  }
  .card-1 {
    background: linear-gradient(to right, #4484ba, #004680);
  }
  .card-2 {
    background: linear-gradient(to right, #38ef7d, #11998e);
  }
  .card-3 {
    background: linear-gradient(121deg, #ff3d57 0%, #ff8a48 101%);
  }
</style>
